<template>
	<view class="container container-box" :style="{backgroundImage:'url('+unpay_result_bg+')'}">
		<navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
		<view class="content-box">
			<image :src="result_content_bg" mode="" class="unpay-result-bg"></image>
			<image :src="btn_pay" mode="" class="btn-pay" @click="toOrderPay"></image>
			<view class="flex-vc price-text" v-if="detailData">
				￥<span style="margin-right: 30rpx;">{{detailData.newOriginalPrice}}</span>
				<span v-if="detailData.discountPrice&&detailData.newOriginalPrice!=detailData.discountPrice">券后{{detailData.discountPrice}}</span>
			</view>
		</view>
		<view class="nickname-text">@{{nickName}}</view>
	</view>
</template>

<script>
	import {
		get_scl_info
	} from '@/common/api/scl_api.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				pageLoading: false,
				btn_pay: this.imgBaseURL + '/scl/dongwulianai/result/btn_pay.png',
				unpay_result_bg: this.imgBaseURL + '/scl/dongwulianai/result/unpay_result_bg.png',
				result_content_bg: this.imgBaseURL + '/scl/dongwulianai/result/result_content_bg.png',
				payed_result_bg: this.imgBaseURL + '/scl/dongwulianai/result/payed_result_bg.png',
				navigationBarDataInfo: {
					"bg_color": "#rgba(0,0,0,0)",
					"color": "#fff",
					"flag": 4,
					"name": "测评支付"
				},
				sclId: '',
				submitForm: null,
				detailData: null
			}
		},
		computed: {
			...mapGetters('user', ['nickName'])
		},
		onLoad(options) {
			this.submitForm = JSON.parse(options.submitForm);
			get_scl_info({
				sclId: this.submitForm.sclId
			}).then(res => {
				this.detailData = res.data.data;
			})
		},
		methods: {
			backHandle(){
				uni.navigateBack();
			},
			toOrderPay() {
				const params = {
					orderType: '7',
					sclId: this.submitForm.sclId
				}
				const that = this
				uni.showLoading()
				this.$u.api.addLog({
					sclId: this.submitForm.sclId,
					sourseType: 1
				})
				this.$u.api.orderPay(params).then(res => {
					if (res.data.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							service: 5,
							orderInfo: res.data.data.wr,
							timeStamp: res.data.data.wr.timeStamp,
							nonceStr: res.data.data.wr.nonceStr,
							package: res.data.data.wr.packageValue,
							signType: res.data.data.wr.signType,
							paySign: res.data.data.wr.paySign,
							success: function(res) {
								console.log(res, '================= uni.requestPayment - res')
								that.toSubmit()
								uni.hideLoading()
							},
							fail() {
								uni.hideLoading()
							}
						})
					} else {
						that.$showToast(res.data.message);
						uni.hideLoading()
					}
				}).catch(e => {
					uni.hideLoading()
				})
			},
			toSubmit() {
				this.$u.api.userWebAnswer(this.submitForm).then(res => {
					if (res.data.code == 2000) {
						let url = ''
						url = '/subcontractorB/pages/sclResult/sclResult?id=' + res.data.data.id
						// debugger
						const tmpObj = res.data.usergetDiscount || {}
						if (tmpObj.code) {
							uni.setStorageSync('newCouponInfo', {
								couponId: tmpObj.id,
								couponCode: tmpObj.code,
								couponName: tmpObj.discountName,
								couponNum: tmpObj.discount
							})
						}
						uni.reLaunch({
							url
						})
					} else {
						setTimeout(() => {
							this.$showToast(res.data.message);
						}, 300)
					}
				})
			},
		}
	}
</script>

<style>
	.container-box {
		background-size: cover;
	}

	.content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.unpay-result-bg {
		width: 719rpx;
		height: 703rpx;
		display: block;
	}

	.btn-pay {
		width: 500rpx;
		height: 198rpx;
		display: block;
	}

	.price-text {
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.nickname-text {
		letter-spacing: 4rpx;
		font-weight: bold;
		font-size: 60rpx;
		color: #FFFFFF;
		position: absolute;
		left: 60rpx;
		top: 180rpx;
	}
</style>